<template>
	<view class="product-body-item">
		<image :src="data.productInfo.pic_url" mode="aspectFill" @tap="goDetail"></image>
		<view class="product-body-item-showpart">
			<view class="title" @tap="goDetail">{{data.productInfo.product_name}}</view>
			<view class="price-container" @tap="goDetail" >
				<view class="price"><text style="font-size: 20rpx;">￥</text>{{data.productInfo.discount_price}}</view>
				<view class="discount">{{(Math.floor(data.productInfo.discount_price/data.productInfo.price*100)/100).toFixed(2)}}折</view>
			</view>
			<view class="show-container" @tap="goDetail">
				<view class="sell-count">
					月售 {{data.productInfo.sell_count}}
				</view>
				<view class="like-count">
					{{data.productInfo.like_count}}人想要
				</view>
			</view>
			<image v-if="data.count==0" class="add-im" src="/page_product/static/add1.png" mode="widthFix" @tap="changeCount(0)"></image>
			<view class="image-container" v-if="data.count!=0">
				<image src="/page_product/static/minus.png" mode="widthFix" @tap="changeCount(1)"></image>
				<text>{{data.count}}</text>
				<image src="/page_product/static/add1.png" mode="widthFix" @tap="changeCount(0)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {reactive,onMounted,watch} from "vue"
	import {onLoad} from "@dcloudio/uni-app"
	export default{
		name:"productItem",
		setup(props, context) {
			let data = reactive({
				productInfo:{},
				count:0
			})
			
			onMounted((e)=>{
				// console.log(props.productInfo)
				data.productInfo = props.productInfo
			})
			
			watch(props,(newValue)=>{
				if(newValue.count != null) data.count = newValue.count
			})
			
			function changeCount(i){
				if(i==0) data.count++;
				else if(i==1) data.count--;
				context.emit('changePrice',data.count)
			}
			
			function goDetail(){
				context.emit('goDetail',0)
			}
			
			return {
				data,
				changeCount,
				goDetail
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.product-body-item {
		width: 330rpx;
		border-radius: 15rpx;
		background-color: white;
		
		& image{
			width: 330rpx;
			height: 230rpx;
			border-radius: 15rpx 15rpx 0 0;
		}
		
		& .product-body-item-showpart{
			padding: 5rpx 15rpx;
			width: 300rpx;
			height: 195rpx;
			position: relative;
			
			& .title{
				width: 300rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 26rpx;
				overflow: hidden;
			}
			
			& .add-im{
				width: 40rpx;
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
			}
			
			& .image-container{
				width: 160rpx;
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
				display: flex;
				justify-content: space-between;
				height: 45rpx;
				
				image {
					width: 45rpx;
				}
				
				text{
					font-size: 28rpx;
					line-height: 45rpx;
				}
			}
			
			& .show-container{
				width: 300rpx;
				display: flex;
				justify-content: space-between;
				height: 40rpx;
				line-height: 40rpx;
				
				
				& .sell-count{
					color: #aaaaaa;
					font-size: 25rpx;
				}
				
				& .like-count{
					color: #aaaaaa;
					font-size: 25rpx;
					margin-left: 30rpx;
				}
				
				
			}
			
			
			
			& .price-container{
				display: flex;
				height: 40rpx;
				line-height: 40rpx;
				
				& .price{
					
				}
				
				& .discount {
					border-radius: 10rpx;
					color: white;
					padding: 0 10rpx;
					background-color: #DE6868;
					font-size: 25rpx;
					margin-left: 15rpx;
				}
			}
			
		}
	}
</style>